<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta author="tianjindong.cn 田金东">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 跨域请求 -->
<meta name="referrer" content="no-referrer" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>${article.title }</title>
<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/nprogress.css">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link rel="stylesheet" type="text/css" href="/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/css/article-like.css">
<link rel="apple-touch-icon-precomposed" href="/images/icon/icon.png">
<link rel="shortcut icon" href="/images/icon/favicon.ico">
<script src="/js/jquery-2.1.4.min.js"></script>
<script src="/js/nprogress.js"></script>
<script src="/js/jquery.lazyload.min.js"></script>
</head>

<body class="user-select single">
	<input type="hidden" id="user_id" value="${user.id }">
	<jsp:include page="common/top.jsp" />
	<section class="container">
		<div class="content-wrap">
			<div class="content">
				<header class="article-header">
					<h1 class="article-title">
						<a href="#">${article.title }</a>
					</h1>
					<div class="article-meta">
						<span class="item article-meta-time">
							<time class="time" data-toggle="tooltip" data-placement="bottom" title="时间：${article.stringUpdatetime }">
								<i class="glyphicon glyphicon-time"></i>
								${article.stringUpdatetime }
							</time>
						</span>
						<span class="item article-meta-source" data-toggle="tooltip" data-placement="bottom" title="来源：${article.source }">
							<i class="glyphicon glyphicon-globe"></i>
							${article.source }
						</span>
						<span class="item article-meta-category" data-toggle="tooltip" data-placement="bottom" title="栏目：${article.category.name }">
							<i class="glyphicon glyphicon-list"></i>
							<a href="program" title="">${article.category.name }</a>
						</span>
						<span class="item article-meta-views" data-toggle="tooltip" data-placement="bottom" title="查看：${article.visitNum }">
							<i class="glyphicon glyphicon-eye-open"></i>
							共${article.visitNum }人围观
						</span>
						<span class="item article-meta-comment" data-toggle="tooltip" data-placement="bottom" title="评论：0">
							<i class="glyphicon glyphicon-comment"></i>
							${article.commentNum }个不明物体
						</span>
						<span style="float:right;cursor: pointer;" class="iconfont icon-tubiao14" data-toggle="tooltip" data-placement="bottom" title="点击收藏"></span>
					</div>

				</header>
				<article class="article-content">
					<!-- 文章开始 -->
					${article.content }
					<!-- 文章结束 -->
				</article>
				<div class="article-tags">
					标签：
					<c:forEach items="${article.tagList }" var="tag">
						<a href="${pageContext.request.contextPath }/tag-article/${tag.id}.html" rel="tag">${tag.tagname }</a>
					</c:forEach>
				</div>
				<div class="title" id="comment">
					<h3>
						评论
						<small>抢沙发</small>
					</h3>
				</div>
				<div id="alert-success" class="alert alert-success" role="alert" style="text-align: center;display: none;">评论成功！</div>
				<div id="alert-warning" class="alert alert-warning" role="alert" style="text-align: center;display: none;">评论后在提交吧！</div>
				<div id="alert-warning-login" class="alert alert-warning" role="alert" style="text-align: center;display: none;">登录后才能评论哦！</div>
				<div id="alert-danger" class="alert alert-danger" role="alert" style="text-align: center;display: none;">网络好像出了问题，评论失败！</div>
				<div id="respond">
					<form id="comment-form" action="" method="post">
						<div class="comment">
							<div class="comment-title">
								<c:choose>
									<c:when test="${user.id==null or user.id=='' }">
										<img class="avatar" src="/images/icon/icon.png" alt="" />
									</c:when>
									<c:otherwise>
										<img class="avatar" src="${user.imgurl }" alt="" />
									</c:otherwise>
								</c:choose>
							</div>
							<div class="comment-box">
								<c:choose>
									<c:when test="${user==null }">
										<textarea placeholder="  登陆后才能评论哦！" name="content" id="comment-textarea" cols="100%" rows="3" tabindex="1"></textarea>
									</c:when>
									<c:otherwise>
										<textarea placeholder="  您的评论可以一针见血" name="content" id="comment-textarea" cols="100%" rows="3" tabindex="1"></textarea>
									</c:otherwise>
								</c:choose>

								<div class="comment-ctrl">
									<input type="hidden" value="${article.id }" name="articleId" class="articleid" />
									<input type="hidden" value="${user.id }" name="userId" class="articleid" />
									<button type="button" id="comment-submit" tabindex="5" articleid="1">评论</button>
								</div>
							</div>
						</div>
					</form>
				</div>
				<div id="postcomments">
					<!-- 评论显示区 -->
					<!-- 加载全部评论按钮 -->
				</div>
			</div>
		</div>
		<jsp:include page="common/right.jsp" />
	</section>
	<jsp:include page="common/footer.jsp" />
	<script src="/js/bootstrap.min.js"></script>
	<script src="/js/jquery.ias.js"></script>
	<script src="/js/scripts.js"></script>
	<script src="/js/jquery.qqFace.js"></script>
	<script src="/js/console.js"></script>
	<script type="text/javascript">
		//判断字符串是否为空
		function strIsNull(str){
			if (str == null || str == "") return true;
			var regu = "^[ ]+$";
			var re = new RegExp(regu);
			return re.test(str);
		}
		var tag=0;//0表示未收藏，1表示收藏
		$(function() {
			//为评论提交按钮绑定事件
			$("#comment-submit").click(function(){
				var comment=$("#comment-form").serialize();
				if(${user.id==null or user.id=="" }){
					$("#alert-warning").css("display","none");//显示前先取消提示
					$("#alert-success").css("display","none");
					$("#alert-danger").css("display","none");
					$("#alert-warning-login").fadeIn(1000,function(){
							window.setInterval(function(){
								$("#alert-warning-login").fadeOut(1000,function(){});
							}, 5000); 
	 					});
				}else{
					if(strIsNull($("#comment-textarea").val())){
						$("#alert-warning").css("display","none");//显示前先取消提示
						$("#alert-success").css("display","none");
						$("#alert-danger").css("display","none");
						$("#alert-warning").fadeIn(1000,function(){
							window.setInterval(function(){
								$("#alert-warning").fadeOut(1000,function(){});
							}, 5000); 
	 					});
					}else{
						$.post(
							"${pageContext.request.contextPath}/user/comment/add.action",
							comment,
							function(data){
								if(data.status=="ok"){
									var date = new Date();
									var dateStr=date.getFullYear()+"-"+(date.getMonth() + 1)+"-"+date.getDate();
									console.info(data.content);
									var content="<ol class='commentlist'><li class='comment-content'><div class='comment-avatar'><img class='avatar' src='${user.imgurl}' alt='' /></div><div class='comment-main'><p> <span class='address'>${user.name}</span> <span class='time'>("+dateStr+")</span><br /> "+data.content+"</p></div></li></ol>";
									$("#postcomments").prepend(content);
									$("#comment-textarea").val("");
									$("#alert-warning").css("display","none");//显示前先取消提示
									$("#alert-success").css("display","none");
									$("#alert-danger").css("display","none");
									$("#alert-success").fadeIn(1000,function(){//弹出提示
										window.setInterval(function(){
											$("#alert-success").fadeOut(1000,function(){});
										}, 5000); 
	 								});
								}else{
									$("#alert-warning").css("display","none");//显示前先取消提示
									$("#alert-success").css("display","none");
									$("#alert-danger").css("display","none");
									$("#alert-danger").fadeIn(1000,function(){//弹出提示
										window.setInterval(function(){
											$("#alert-danger").fadeOut(1000,function(){});
										}, 5000); 
	 								});
								}
							},
							"json"
						);	
					}
				}
			});
			
			$("#comment-textarea").change(function(){//文本修改后，
				$("#alert-success").fadeOut(1000,function(){});
				$("#alert-warning").fadeOut(1000,function(){});
				$("#alert-danger").fadeOut(1000,function(){});
			});
			$("#comment-textarea").focus(function(){//当用户准备评论时，弹出登录提示
				if(${user.id==null or user.id=="" }){
					$("#alert-warning-login").fadeIn(1000,function(){//弹出提示
						window.setInterval(function(){
							$("#alert-warning-login").fadeOut(1000,function(){});
						}, 5000); 
	 				});
				}
			});
			
			
			//加在此文章的评论
			loadComment(${article.id});
			
			
			
			//页面加载时，查看当前文章是否被收藏
			if($("#user_id").val()!=null && $("#user_id").val()!=''){//用户登录了
				$.post(
					"${pageContext.request.contextPath}/user/collection/check.action",
					{"articleId":${article.id}},
					function(data){
						if(data.status=="exist"){
							tag=1;
							$(".icon-tubiao14").toggleClass('cs');//变换收藏按钮样式
						}
  					},
  					"json"
				);
			}
			
				/**
					收藏按钮点击事件
				**/
			$(".icon-tubiao14").click(function() {
				var userId = $("#user_id").val();
				if (userId == null|| userId=='') {
					window.location.href="${pageContext.request.contextPath}/login.html";
				}else{
					if(tag==1){//此次操作是取消收藏
						$.post(
							"${pageContext.request.contextPath}/user/collection/delete.action",
							{"articleId":${article.id}},
							function(data){
								if(data.status=="ok"){
     								tag=0;//设置为未收藏
									$(".icon-tubiao14").toggleClass('cs');
								}else{
									alert("取消收藏失败");
								}
							},
							"json"
						);
						
					}else{//此次操作是收藏
						$.post(
							"${pageContext.request.contextPath}/user/collection/add.action",
							{"articleId":${article.id}},
							function(data){
								if(data.status=="ok"){
									$(".icon-tubiao14").toggleClass('cs');
     								tag=1;//设置为收藏
								}else{
									alert("收藏失败");
								}
							},
							"json"
						);
					}
				}
			});
			
			
		});
		
		
		var comment="";//未显示的评论
		function loadComment(articleId){
			$.post(
				"${pageContext.request.contextPath}/article/comment/list.action",
				{"articleId":articleId},
				function(data){
					content="";
					for(var i=0;i<data.length;i++){
						if(i<2){//显示两条评论
							content+="<ol class='commentlist'><li class='comment-content'><span class='comment-f'>#"+data.length+"</span><div class='comment-avatar'><img class='avatar' src='"+data[i].user.imgurl+"' alt='' /></div><div class='comment-main'><p> <span class='address'>"+data[i].user.name+"</span> <span class='time'>("+data[i].stringCreatetime+")</span><br /> "+data[i].content+"</p></div></li></ol>";
						}else{
							comment+="<ol class='commentlist'><li class='comment-content'><span class='comment-f'>#"+data.length+"</span><div class='comment-avatar'><img class='avatar' src='"+data[i].user.imgurl+"' alt='' /></div><div class='comment-main'><p> <span class='address'>"+data[i].user.name+"</span> <span class='time'>("+data[i].stringCreatetime+")</span><br /> "+data[i].content+"</p></div></li></ol>";
						}
					}
					if(comment!=""){//如果还有评论未显示，则插入“全部评论”按钮
						$("#postcomments").append("<div id='loadButton' align='center' style='margin-top: 5px'><a id='loadArticle' href='javascript:void(0);' onclick='clickLoadButton()' style='color: #999999;text-decoration:none;' >全部评论["+data.length+"]</a></div>");
					}
					$("#postcomments").prepend(content);
				},
				"json"
			);
		}
		
		function clickLoadButton(){
			$("#loadButton").before(comment);
			comment="";
			$("#loadButton").remove();
		}
	</script>
</body>
</html>